<script lang="ts">
export default {
  name: "xt-pagination",
};
</script>

<script setup lang="ts">
import { computed, nextTick } from "vue";
import { ElPagination } from "element-plus";
import Typings from "../../../typings";

interface Props extends /* @vue-ignore */ Typings.Pagination.props {
  layout: Typings.Pagination.props["layout"];
  background: Typings.Pagination.props["background"];
  currentPage: Typings.Pagination.props["currentPage"];
  pageSize: Typings.Pagination.props["pageSize"];
}

const props = withDefaults(defineProps<Partial<Props>>(), {
  layout: "total, prev, pager, next, sizes, jumper",
  background: true,
  currentPage: 1,
  pageSize: 10,
});

const emit = defineEmits(["update:currentPage", "update:pageSize", "change"]);

const currentPage = computed({
  get() {
    return props.currentPage;
  },
  set(page) {
    emit("update:currentPage", page);
  },
});

const pageSize = computed({
  get() {
    return props.pageSize;
  },
  set(size) {
    emit("update:pageSize", size);
  },
});

const onChange = async () => {
  await nextTick();
  emit("change", currentPage.value, pageSize.value);
};
</script>

<template>
  <el-pagination
    class="xt-pagination"
    :background="background"
    :layout="layout"
    v-model:current-page="currentPage"
    v-model:page-size="pageSize"
    @size-change="onChange"
    @current-change="onChange"
  >
    <template v-for="(_value, name) in $slots" #[name]="scope" :key="name">
      <slot :name="name" v-bind="scope || {}"></slot>
    </template>
  </el-pagination>
</template>

<style lang="scss">
@use "../../../scss/xt-pagination.scss";
</style>
